<template>
	<view class="MenuTab" :style="{height:`${height}rpx`}">
		<view  class="MenuTab-item" v-for="(item,idx) in list" @click="selTab(item,idx)">
			<view class="inner-item">
				<view class="icon" :style="{
					backgroundImage:`url(${item.icon})`,
					width:`${iconSize[0]}rpx`,
					height:`${iconSize[1]}rpx`
					}"></view>
				<view  :style="{color:color}" class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selItem: '',
		};
	},
	props: {
		iconSize:{
			type: Array,
			default: ()=> [54,54]
		},
		height:{
			type: String,
			default: ()=>"96"
		},
		color:{
			type: String,
			default: ()=>"#000"
		},
		list: {
			type: Array,
			default: ()=>[]
		},
	},
	mounted() {
	},
	methods: {
		selTab(item,idx) {
			if(item.function){
				item.function()


			}
			this.selItem = item;
			this.navTo(item.url,item.params || {})
		}
	}
};
</script>

<style lang="scss">
.MenuTab{
	height: 100%;
	width: 100%;
	display: flex;
	flex-flow:row nowrap;
	.sel-MenuTab-item,.MenuTab-item{
		flex:1;
		position: relative;
	}
	.inner-item{
			font-size: 26rpx;
		position: absolute;
		width: 100%;
		top:50%;
		transform: translateY(-50%);
		.icon{
			margin:0 auto;
			background-size: 100%;
			background-repeat: no-repeat;
		}
		.name{
			margin-top: 25rpx;
			text-align: center;
		}
	}
}
</style>
